<template>
  <Modal v-model="modal" :title="title" :width='width' @on-visible-change='onVisibleChange' :transfer='transfer'>
    <template v-slot:footer>
      <div class="footer">
        <Button @click='onClose'>关闭</Button>
        <Button type="primary" @click='onOK' v-if="showOk">{{okText || '确定'}}</Button>
      </div>
    </template>
    <slot></slot>
    <dt-info :line-number='lineNumber' :label-width="labelWidth" ref='info'></dt-info>
    <slot name="bottom"></slot>
  </Modal>
</template>

<script>
  export default {
    props: {
      width: Number,
      title: String,
      labelWidth: Number,
      lineNumber: Number,
      okText: String,
      showOk:{
        type:Boolean,
        default:false
      },
      transfer: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        modal: false,
        info: null,
        options: null,
      }
    },
    methods: {
      show(options = [], info = {}) {
        this.$refs.info.init(options, info)
        if (Array.isArray(options)) {
          this.options = options
        }
        this.modal = true
      },
      hide() {
        this.modal = false
      },
      onClose() {
        this.modal = false
      },
      onVisibleChange(show) {
        if (!show) {
          this.$emit('close')
        }
      },
      onOK() {
        this.$refs.info.validate().then((res) => {
          if (res) {
            this.$emit('ok', {
              ...this.info,
            })
          } else {
            console.warn('dt-model-info', this.info)
          }
        })
      },
    }
  }
</script>

<style lang='scss' scoped>
</style>
